<template>
	<div class="upfoods">
		<div class="searchboxbg">
			<div class="searchbox">
				<image src="../../../static/home/search.png" class="searchicon"></image>
				<input type="text" value="" placeholder="请输入搜索内容"/>
				<image src="../../../static/home/close.png" class="closeicon"></image>
			</div>
		</div>
		<div class="upfoodslist">
			<div class="upfoodslistitem" v-for='item in 2'>
				<div class="listswitch flsb flcm">
					<div class="switchtxt fsize285">产品名称：大白猪优质精液50ml</div>
					<div class="switchbox">
						<span class='fsize28'>上架</span>
						<switch class="flr" style="transform: scale(0.6);" checked @change="switch1Change" />
					</div>
				</div>
				<div class="foodsinfomation">
					<image src="../../../static/home/goods.png" class="img160" mode=""></image>
					<div class="infomationbox">
						<div class="foodstxt">
							<span class='fsize24l'>产品ID：</span>
							<span class='fsize24t'>#186</span>
						</div>
						<div class="foodstxt">
							<span class='fsize24l'>价格：</span>
							<span class='fsize24t'>200元</span>
						</div>
						<div class="foodstxt">
							<span class='fsize24l'>库存：</span>
							<span class='fsize24t'>13</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="entering fsize32w" @click = 'gotoproductdetails'>
			添加
		</div>
	</div>


</template>

<script>
	export default {
		data() {
			return {
				hour: 10,
				minute:50,
				second:32
			};
		},
		onLoad: function() {
	
		},
		methods: {
			gotoproductdetails(e) {
				uni.navigateTo({
					url: '../productdetails/productdetails' 
				});
			},
			switch1Change (e) {
			            console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
		}
	}
</script>

<style lang="less">
	.searchboxbg {
		height: 120rpx;
		width: 100%;
		background-color: #FFFFFF;
		.searchbox {
			background-color: #F0F0F0;
			width: 686rpx;
			margin: 0 auto;
			position: relative;
			top: 16rpx;
			height: 72rpx;
			border-radius:12rpx;
			image{
				width: 40rpx;
				height: 42rpx;
				margin: 16rpx 22rpx 14rpx 22rpx;
			}
			.searchicon {
				position: absolute;
				left: 0;
			}
			input{
				width: 100%;
				line-height:72rpx ;
				height: 72rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding-left: 72rpx;
				box-sizing: border-box;
			}
			.closeicon {
				position: absolute;
				right: 0;
			}
		}
	}
	.upfoodslist {
		background-color: #F0F0F0;
		padding-top: 1rpx;
		.upfoodslistitem {
			margin-top: 16rpx;
			background-color: #FFFFFF;
			padding: 32rpx;
			.listswitch {
				height:104rpx;
				box-shadow:0px -1rpx 0px 0px rgba(0,0,0,0.1);
			}
			.flr {
				margin-right: -32rpx;
			}
		}
	}
	.foodsinfomation {
		margin-top: 16rpx;
		display: flex;
		.foodstxt {
			margin-left: 24rpx;
			line-height: 48rpx;
		}
	}
	

	
</style>
